<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
    <script src="../build/jquery.min.js"></script>

</head>
<body>
<div id="example"></div>
<script type="text/babel">

    class Chosen extends React.Component {

        componentDidMount() {
            this.$el = $(this.el);
            this.$el.chosen();

            this.handleChange = this.handleChange.bind(this);
            this.$el.on('change', this.handleChange);
        }

        componentWillUnmount() {
            this.$el.off('change', this.handleChange);
            this.$el.chosen('destroy');
        }

        componentDidUpdate(prevProps) {
            if (prevProps.children !== this.props.children) {
                this.$el.trigger("chosen:updated");
            }
        }

        handleChange(e) {
            this.props.onChange(e.target.value);
        }



        render() {
            return (
                    <div>
                        <select className="Chosen-select" ref={el => this.el = el}>
                            {this.props.children}
                        </select>
                    </div>
            );
        }
    }

    function Example() {
        return (
                <Chosen>
                    <option>vanilla</option>
                    <option>chocolate</option>
                    <option>strawberry</option>
                </Chosen>
        );
    }

    ReactDOM.render(
            <Example />,
        document.getElementById('example')
    );



</script>
</body>
</html>

